<template>
	<el-card v-loading="loading">
		<div class="header">
			<h2 class="title">
				<el-icon @click="router.back()"><i-ep-Back /></el-icon
				>{{ product.name }}
			</h2>
			<el-button type="primary" @click="handleEdit">编辑</el-button>
		</div>
		<el-descriptions title="图片信息" :column="2" border>
			<el-descriptions-item :spam="12" label="商品图片">
				<el-image
					:preview-src-list="product.image"
					:initial-index="index"
					v-for="(item, index) in product.image"
					:key="index"
					:src="item"
					fit="contain"
					alt="商品图片"
					style="width: 100px; height: 100px"
				/>
			</el-descriptions-item>
		</el-descriptions>
		<el-descriptions title="价格信息" :column="1" border>
			<el-descriptions-item :spam="12" label="价格">{{
				product.price
			}}</el-descriptions-item>
		</el-descriptions>
		<el-descriptions title="基本信息" :column="2" border>
			<el-descriptions-item :spam="12" label="商品编码">{{
				product.itemCode
			}}</el-descriptions-item>
			<el-descriptions-item :spam="12" label="类别">{{
				product.category
			}}</el-descriptions-item>
			<el-descriptions-item :spam="12" label="单位">{{
				product.unit
			}}</el-descriptions-item>
		</el-descriptions>
		<el-descriptions title="库存信息" :column="2" border>
			<el-descriptions-item :spam="12" label="数量">{{
				product.quantity
			}}</el-descriptions-item>
			<el-descriptions-item :spam="12" label="最低数量">{{
				product.minQuantity
			}}</el-descriptions-item>
			<el-descriptions-item :spam="12" label="最高数量">{{
				product.maxQuantity
			}}</el-descriptions-item>
		</el-descriptions>
		<el-descriptions title="其他信息" :column="1" border>
			<el-descriptions-item :spam="12" label="备注">{{
				product.remark
			}}</el-descriptions-item>
		</el-descriptions>
	</el-card>
</template>

<script setup>
import { ref } from 'vue'
import api from '@/request/index'

let route = useRoute()
let router = useRouter()
const loading = ref(false)

const product = ref({
	itemCode: '',
	name: '',
	category: '',
	unit: '',
	quantity: 0,
	minQuantity: 0,
	maxQuantity: 0,
	price: 0,
	status: true,
	remark: '',
	image: ''
})

onMounted(() => {
	initData()
})

const initData = async () => {
	try {
		loading.value = true
		let { data } = await api.productDetail(route.params.id)
		if (data.image) {
			data.image = data.image.split(';')
		}
		product.value = data
	} catch (error) {
		ElMessage.error(error.message)
	} finally {
		loading.value = false
	}
}

const handleEdit = () => {
	router.push(`/store/product/edit/${route.params.id}`)
}
</script>

<style scoped lang="less">
/* 可以在这里添加样式 */
.el-descriptions {
	margin-top: 20px; /* 增加顶部间距 */
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title {
		gap: 10px;
		display: flex;
		align-items: center;

		.el-icon {
			cursor: pointer;
		}
	}
}

::v-deep(.el-descriptions__label) {
	width: 120px;
}
</style>
